/**
 * Created by mac on 2017/7/10.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ScrollView,
    StatusBar,
    TouchableOpacity,
    DeviceEventEmitter,
} from 'react-native';

import Swiper from 'react-native-swiper';

import CountDownReact from 'react_native_countdowntimer/CountDownReact';

import { findNodeHandle } from 'react-native';


let width = Dimensions.get('window').width;

// 数据
let flashSaleData = require('./data.json').data.recommendChannel.flashSale;




class RightSwiper extends Component{

    // 构造
      constructor(props) {
        super(props);
        // 初始状态

          let images = [];

         for (let i = 0;i<flashSaleData.products.length;i++){

             let t = false;

             images.push(t);
         }


          this.state={
              images:images,
          }

      }


    componentDidMount() {


    }


    render(){

        console.log('images');
        console.log(this.state.images);

        _this = this;

        let scrollImageViews = [];
        flashSaleData.products.map(function(item,i){

            let v = (
                <View  style={{backgroundColor:'white',width:width/2,height:width*3/8+20}}>
                    <Image style={{width:width/4,height:width/4, alignSelf:'center'}} key={i} source={{uri:item.pic}}/>
                    <View style={{paddingLeft:5,paddingTop:5,backgroundColor:'white'}}>
                        <Text style={{fontSize:12,color:'gray',paddingTop:5}}>{item.name}</Text>
                        <Text style={{color:'red',flexDirection:'row',paddingTop:5}}>
                            {item.salesPrice.toFixed(2)+'  '}
                            <Text style={{paddingBottom:0,fontSize:10, textDecorationLine:'line-through',color:'gray'}}>{item.marketPrice.toFixed(2)}</Text>
                        </Text>
                    </View>
                    <TouchableOpacity onPress={(e)=>{

                        console.log('onpress='+e.nativeEvent.pageX);
                        console.log('onpress='+e.nativeEvent.pageY);
                        console.log('onpress='+e.nativeEvent.locationX);
                        console.log('onpress='+e.nativeEvent.locationY);

                        let point = {
                            x:e.nativeEvent.pageX-e.nativeEvent.locationX,
                            y:e.nativeEvent.pageY-e.nativeEvent.locationY
                        }

                       // DeviceEventEmitter.emit('ClickCart',point);
                        _this.props.clickCart(point);

                    }} style={{position:'absolute',bottom:20,right:20}}>
                        <Image  source={require('./images/icon-add-to-cart-green.png')} style={{width:37*0.7,height:33*0.7}}/>
                        <Image  source={require('./images/add-to-cart-img@2x.png')} style={{width:52,height:66,position:'absolute',display:_this.state.images[i]?'flex':'none'}}/>
                    </TouchableOpacity>
                </View>
            )

            scrollImageViews.push(v);

        })

        return (
            <Swiper loop={true}
                    index={0}
                    autoplay={true}
                    autoplayTimeout={5}
                    horizontal={true}
                    pagingEnabled={true}
                    showsPagination={true}
                    height={width*3/8+20}
                    width={width/2}
                    bounces={false}
                    contentContainerStyle={{flexDirection: 'row',width:width/2,height:width*3/8+20}}
                    dotColor="white"
                    activeDotColor="lightgray"
                    paginationStyle={{width:50,height:20,left:width/2-60,bottom:-5}}
                    dotStyle={{ width: 10,
                        height: 3,
                        borderRadius: 2,}}
                    activeDotStyle={{ width: 10,
                        height: 3,
                        borderRadius: 2,
                    }}

            >
                {scrollImageViews}
            </Swiper>

        )
    }
}


class LeftView extends Component{

    componentDidMount() {
        console.log('image');
    }

    render(){

        let stringTime = this.props.date;
        let dateTime =Date.parse(new Date(stringTime));

        dateTime = dateTime - 8*60*60*1000;
        let date = new Date(dateTime);


        return (
            <View style={{justifyContent:'center',alignItems:'center',width:width/2,height:width*3/8}}>
                <View style={{flexDirection:'row',alignItems:'center',}}>
                    <Image style={{width:30,height:30}} source={require('./images/icon-flash-sale@2x.png')}/>
                    <Text style={{color:'red'}}>秒杀</Text>
                </View>
                <Text style={{paddingTop:5,color:'gray',fontSize:12}}>距离秒杀结束</Text>
                <CountDownReact
                    date={date.toUTCString()}
                    hours=':'
                    mins=':'
                    segs=''
                    daysStyle={{color:'black',fontSize:25}}
                    hoursStyle={{color:'black',fontSize:25}}
                    minsStyle={{color:'black',fontSize:25}}
                    secsStyle={{color:'black',fontSize:25}}
                    firstColonStyle={{color:'black',fontSize:25}}
                    secondColonStyle={{color:'black',fontSize:25}}

                />
                <Image style={{position:'absolute',top:5,left:5,width:50,height:50}} source={require('./images/icon-index-flash-sale@2x.png')}/>
            </View>
        )
    }

}




export default class FlashSale extends Component{

    render(){

        return (
            <View style={{flexDirection:'row'}}>
                <LeftView date={flashSaleData.endTime.replace(/ /, "T")}/>
                <RightSwiper clickCart={(point)=>this.props.clickCart(point)}/>
            </View>
        )
    }

}

